<template>
  <!-- 员工管理 -->
  <div class="employees-container">
    <div class="app-container">
      <PageTools>
        <template #slot-left>
          <span>共{{ total }}条记录</span>
        </template>
        <template #slot-right>
          <el-button type="danger" size="small" @click="$router.push('/excel')">导入excel</el-button>
          <el-button type="success" size="small" @click="downloadExcel">导出excel</el-button>
          <el-button type="primary" size="small" @click="showDialog = true">新增员工</el-button>
        </template>
      </PageTools>
      <el-dialog title="新增员工" :visible.sync="showDialog">
        <empDialog ref="addEmpt" @close="showDialog = false" @changeList="changeListFn" />
      </el-dialog>
      <el-card style="margin-top:10px">
        <el-table :data="tableData" border style="width: 100%" :header-cell-style="rowClass" :cell-style="rowClass">
          <el-table-column type="index" label="序号" width="80" />
          <el-table-column prop="username" label="姓名" width="120" sortable />
          <el-table-column label="头像" sortable width="150">
            <template v-slot="scope">
              <!-- <img :src="scope.row.staffPhoto" alt="" class="listImg"> -->
              <ImageHolder :src="scope.row.staffPhoto" class="listImg" />
            </template>
          </el-table-column>
          <el-table-column prop="mobile" label="手机号" sortable width="150" />
          <el-table-column prop="workNumber" label="工号" width="120" sortable />
          <el-table-column prop="formOfEmployment" width="120" label="聘用形式" sortable :formatter="formatter">
            <!-- <template v-slot="scoped">
              {{ scoped.row.formOfEmployment===1?'正式':(scoped.row.formOfEmployment===2?'非正式':'未知') }}
            </template> -->
          </el-table-column>
          <el-table-column prop="departmentName" label="部门" sortable width="150" />
          <el-table-column prop="timeOfEntry" label="入职时间" sortable width="150">
            <template v-slot="scoped">
              {{ scoped.row.timeOfEntry|formatTime }}
            </template>
          </el-table-column>
          <el-table-column label="状态" sortable width="120">
            <template>
              <el-switch
                v-model="value"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            width="260"
            fixed="right"
          >
            <template v-slot="scoped">
              <el-button type="text" @click="toDetailPage(scoped.row.id)">查看</el-button>
              <el-button type="text">转正</el-button>
              <el-button type="text">调岗</el-button>
              <el-button type="text">离职</el-button>
              <el-button type="text">角色</el-button>
              <el-button type="text" @click="removeFn(scoped.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          :page-sizes="[5, 10, 15, 20]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-card>
    </div>
  </div>
</template>

<script>
import { getEmployeesList, delEmployee } from '@/api/employees'
import empDialog from './empDialog.vue'
import dayjs from 'dayjs'
export default {
  components: {
    empDialog
  },
  filters: {
    formatTime(val) {
      return dayjs(val).format('YYYY-MM-DD')
    }
  },
  data() {
    return {
      tableData: [],
      page: 1,
      size: 10,
      total: 0,
      value: true,
      showDialog: false// 增加员工弹框
    }
  },
  watch: {
    showDialog() {
      if (!this.showDialog) {
        this.$refs.addEmpt.resetForm()
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async downloadExcel() {
      const res = await getEmployeesList(this.page, this.size)
      const excelObj = this.transData(res.data.rows)
      import('@/vendor/Export2Excel').then(excel => {
        // excel表示导入的模块对象
        excel.export_json_to_excel({
          header: excelObj.header, // 表头 必填
          data: excelObj.data, // 具体数据 必填
          filename: '员工列表', // 文件名称
          autoWidth: true, // 宽度是否自适应
          bookType: 'xlsx' // 生成的文件类型
        })
      })
    },
    transData(rows) {
      const map = {
        'id': '编号',
        'password': '密码',
        'mobile': '手机号',
        'username': '姓名',
        'timeOfEntry': '入职日期',
        'formOfEmployment': '聘用形式',
        'correctionTime': '转正日期',
        'workNumber': '工号',
        'departmentName': '部门',
        'staffPhoto': '头像地址'
      }
      const headerArr = Object.keys(rows[0])
      const header = headerArr.map(item => {
        return map[item]
      })
      const data = rows.map(item => {
        return Object.values(item)
      })

      return { header, data }
    },
    // 获取员工列表
    async getList() {
      const res = await getEmployeesList(this.page, this.size)
      console.log(res)
      if (res.data.rows.length === 0 && this.page > 1) {
        this.page--
        this.getList()
      }
      this.tableData = res.data.rows
      this.total = res.data.total
    },
    // 用于格式化指定列的值,会传入两个参数：row和column
    formatter(row, column) {
      const obj = {
        1: '正式',
        2: '非正式',
        3: '未知'
      }
      return obj[row.formOfEmployment]
    },
    rowClass() { // 表格剧中
      return 'text-align:center'
    },
    // 删除按钮
    removeFn(id) {
      this.$confirm('确认删除角色么?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        const res = await delEmployee(id)
        console.log(res)
        this.$message.success('操作成功')
        this.getList()
      }).catch(() => {
        this.$message('以取消删除')
      })
    },
    changeListFn() {
      this.showDialog = false
      this.getList()
    },
    toDetailPage(id) {
      this.$router.push({
        path: '/employees/detail',
        query: {
          emoloyeeId: id
        }
      })
    },
    // 分页相关
    handleSizeChange(val) {
      this.size = val
      this.page = 1
      this.getList()
    },
    handleCurrentChange(val) {
      this.page = val
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
.el-pagination {
  text-align: center;
  margin-top: 20px;
}
.listImg{
  width: 110px;
  height: 110px;
  border-radius: 50%;
}
</style>
